<!DOCTYPE html>
<html>
<head>
                <meta charset="UTF-8">
                <title>图片的切换</title>
                <style>
                        .container{margin:0 auto;width:450px;text-align: center;}
                        .buttonclass{margin-bottom: 10px;}
                        .box{
                                border:5px solid gainsboro;width:450px ;height: 450px;  position: relative;
                        }
                        /*块元素是站整行的;left 根据relavite 距离自己原先的距离；绝对定位 是距离定位元素的距离
                         行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块框（即变成块元素），所以就可以设置宽高了
                         * */
                        .box a{ display:inline-block;position: absolute; z-index: 2; width:50px;height:50px;background: blue;top:200px;text-align:center;line-height: 50px;
                        opacity: 0.5;filter:alpha(opacity=50);bottom :0
                        }
                        .prev{left:0}
                        .next{right:0}
                        .title{height:80px;line-height:80px}
                        
                        /* relative ，定位于父元素，absulute ：用于定位于里面的元素；a :定位会变成块元素
                         在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。
                         * */
                        
                </style>
        </head>
        <body>
                <div class="container">
                        <div class="buttonclass">
                                <button class="buttonclass1" data-type="1">循环切换</button>
                                <button class="buttonclass1" data-type="0">顺序切换</button>
                        </div>
                        <div class="box">
                                <img src="img/image-1.jpg" id="img"   width="450px"/>
                                <a class="prev" id="prev">
                                        <
                                </a>
                                <a class="next" id="next">
                                        >
                                </a>
                                <!--<div class="title">图片</div>-->
                        </div>
                </div>
                <script>
                        window.onload=function(){
                                var imgurl =["img/image-1.jpg","img/image-2.jpg","img/image-3.jpg","img/image-4.jpg","img/image-5.jpg","img/image-6.jpg"]
                                var num =0;//跟imgurl 进行比较
                                var pos=0;//0:right 1：left
                                var buttonclasss = document.getElementsByClassName("buttonclass1");
                                for(var i=0;i< buttonclasss.length;i++){
                                        buttonclasss[i].addEventListener('click',function(){
                                                var datatype = this.getAttribute("data-type");//获取属性： 元素。属性 ，。可以换成[];
                                                if(!datatype){
                                                        pos=0;
                                                }else{
                                                        pos=1;
                                                }
                                                num=0;
                                        },true);
                                }
                                var posbutton = document.getElementById("next");
                                posbutton.addEventListener('click',function(){
                                        num++;
                                        if(pos==0){
                                                if(num<imgurl.length){
                                                        document.getElementById("img").src=imgurl[num];
                                                }else{
                                                        num=imgurl.length-1;
                                                        alert("没有图片了");
                                                }
                                        }else{
                                                if(num<imgurl.length){
                                                        document.getElementById("img").src=imgurl[num];
                                                }else{
                                                        num=0;
                                                        document.getElementById("img").src=imgurl[0];
                                                }
                                        }
                                },true)
                                
                                var prevbutton = document.getElementById("prev");
                                prevbutton.addEventListener('click',function(){
                                        if(pos==0){
                                                if(num==0){
                                                        alert("没有图片了");
                                                }else{
                                                        num--;
                                                        document.getElementById("img").src=imgurl[num];
                                                }
                                        }else{
                                                if(num==0){
                                                        num=imgurl.length;
                                                        num--;
                                                        document.getElementById("img").src=imgurl[num];
                                                        
                                                }else{
                                                        num--; 
                                                        document.getElementById("img").src=imgurl[num];
                                                }
                                        }
                                },true)
                        }
                </script>
        </body>
</html>
